<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>019-HTML表单</title>
</head>

<body>
    <!-- HTML 表单用于收集用户的输入信息。 -->
    <!-- HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。 -->

    <!-- 创建了一个表单，包含两个输入框 -->
    <form action="">
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname">
    </form>

    <p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>


    <!-- 创建了一个表单，包含一个普通输入框和一个密码输入框： -->
    <form action="">
        Username: <input type="text" name="user"><br>
        Password: <input type="password" name="password">
    </form>

    <p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

    <!-- 表单是一个包含表单元素的区域。 -->
    <!-- 表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。 -->

    <!-- 文本域（Text Fields） -->
    <form>
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname">
    </form>

    <!-- 密码字段 -->
    <form>
        Password: <input type="password" name="pwd">
    </form>

    <!-- 单选按钮（Radio Buttons） -->
    <form action="">
        <input type="radio" name="sex" value="male">男<br>
        <input type="radio" name="sex" value="female">女
    </form>

    <!-- 复选框（Checkboxes） -->
    <form>
        <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
        <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
    </form>

    <!-- 提交按钮(Submit) -->
    <!-- 当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。 -->
    <!-- action 属性会对接收到的用户输入数据进行相关的处理: -->
    <form name="input" action="html_form_action.php" method="get">
        Username: <input type="text" name="user">
        <input type="submit" value="Submit">
    </form>
    <!--  method 属性，它用于定义表单数据的提交方式 -->
    <!-- post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。 -->
    <!-- get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。 -->

    <!-- 有预选值的 下拉列表 -->
    <form action="">
        <select name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat" selected>Fiat</option>
            <option value="audi">Audi</option>
        </select>
    </form>

    <!-- 文本域(Textarea) -->
    <textarea rows="10" cols="30">
        我是一个文本框。
        </textarea>

    <!-- 按钮 -->
    <button type="button" onclick="alert('你好，世界!')">点我!</button>

    <!-- label -->
    <p>点击其中一个文本标签选中选项：</p>
    <form action="demo_form.php">
        <label for="male">Male</label>
        <input type="radio" name="sex" id="male" value="male"><br>
        <label for="female">Female</label>
        <input type="radio" name="sex" id="female" value="female"><br><br>
        <input type="submit" value="提交">
    </form>
</body>

</html>